<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>滴答办公系统-角色权限</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		  content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="media/layui/css/layui.css" media="all">
	<script src="media/js/jquery.min.js"></script>
</head>
<body>

<div class="layui-container">
	<div class="layui-row" style="margin-top: 10px">
		<div class="layui-col-xs3" style="margin-right: 20px">
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">角色名称：</label>
				<div class="layui-input-block">
					<input type="text" id="no" class="layui-input" placeholder="角色名称">
				</div>
			</div>
		</div>
		<div class="layui-col-xs3" style="margin-right: 20px">
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">用户：</label>
				<div class="layui-input-block">
					<select class="layui-input" id="fg">
						<option value="1">有效</option>
						<option value="2">无效</option>
					</select>
				</div>
			</div>
		</div>
		<div class="layui-col-xs2">
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" onclick="searchData()"><i class="layui-icon layui-icon-search">搜索</i>
					</button>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="layui-row">
	<div class="layui-col-md11">
		<table id="tbdata" lay-filter="tbop"></table>
		<script type="text/html" id="barop">
			<a class="layui-btn layui-btn-mini" lay-event="edit">查看权限</a>
			<a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
		</script>
	</div>
</div>

</div>
<script src="media/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    var tableIns;
    var form1;
    layui.use(['table','form'], function () {
        var table = layui.table;
        form1=layui.form;
        tableIns = table.render({
            elem: '#tbdata'
            , url: 'rolepage.do' //数据接口
            , page: false //关闭分页
            , cols: [[ //表头
                {field: 'id', title: '序号', sort: true, fixed: 'left'}
                , {field: 'name', title: '角色名称'}
                , {field: 'info', title: '角色备注'}
                , {field: 'right', title: '操作', toolbar: "#barop"}
            ]]
        });
        //监听工具条
        table.on('tool(tbop)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('是否确认删除角色?', function (index) {
                    $.ajax({
                        url: "userdel.do",
                        type: "POST",
                        data: "id=" + data.id,
                        success: function (data) {
                            if (data.code == 1000) {
                                obj.del();//删除表格中的对应行数据
                                layer.close(index);
                                layer.msg("删除成功", {icon: 6});
                            } else {
                                layer.msg("删除失败", {icon: 5});
                            }
                        }
                    });
                });
            } else if (obj.event === 'edit') {//编辑 修改
                loadRoles(data);
            }
        });
    });
    function searchData() {
        tableIns.reload({
            where: { //设定异步数据接口的额外参数，任意设
                no: $("#no").val()
                , flag: $("#fg").val()
            }
            // , page: {
            //     curr: 1 //重新从第 1 页开始
            // }
        });
    }
    //修改
    function changeRole() {
        $.ajax({
            url: "userroleedit.do",
            data: $("#fm1").serialize(),
            success: function (obj) {
                if (obj.code == 1000) {
                    layer.msg("编辑权限成功");
                } else {
                    layer.msg("编辑权限失败");
                }
                layer.closeAll();
            }
        })
    }

    function loadRoles(user) {
        console.log(user)
        $("#uid").val(user.id);
        $.get("roleall.do", null, function (arr) {
            $("#dv1").html("");
            console.log(user.rids);
            for (i = 0; i < arr.length; i++) {
                if(user.rids.indexOf(arr[i].id)>-1){
                    $("#dv1").append("<input type=\"checkbox\" name=\"rids\" value='" + arr[i].id + "' title=\"" + arr[i].info + "\" checked>");
                }else{
                    $("#dv1").append("<input type=\"checkbox\" name=\"rids\" value='" + arr[i].id + "' title=\"" + arr[i].info + "\">");
                }
            }
            form1.render();
            layer.open({
                area: ['500px', '300px'],
                title: '角色权限编辑',
                type: 1,
                content:  $('#dvlay'), //这里content是一个普通的String
                btn: ['确认', '取消'],
                yes: function(index, layero){
                    $.ajax({
                        url: "userroleedit.do",
                        data: $("#fm1").serialize(),
                        success: function (obj) {
                            if (obj.code == 1000) {
                                layer.msg("编辑权限成功");
                                searchData();
                            } else {
                                layer.msg("编辑权限失败");
                            }
                        }
                    })
                    layer.close(index);
                },cancel: function(){
                }
            });
        })
    }
</script>
</body>
<div style="display: none;margin-top: 10px;width: 480px" id="dvlay">
	<form id="fm1" class="layui-form layui-form-pane" >
		<div class="layui-form-item" pane >
			<label class="layui-form-label">序号：</label>
			<div class="layui-input-inline">
				<input id="uid" name="id" readonly class="layui-input">
			</div>
		</div>
		<div class="layui-form-item" pane>
			<label class="layui-form-label">权限：</label>
			<div class="layui-input-inline" id="dv1">

			</div>
		</div>
	</form>
</div>
</html>